<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Homework1-2</title>
  </head>
  <body>
    <div id="form">
      <form
        onsubmit="return check()"
        action="date.html"
        method="get"
        enctype="multipart/form-data"
      >
        <fieldset style="width: 430px; background-color: rgba(244, 242, 242, 0.699)">
          <table>
            <h4 style="color: blue">&nbsp;&nbsp;欢迎注册会员</h4>
            <tr>
              <td><b>手机号码 :&nbsp;</b></td>
              <td>
                <input
                  type="text"
                  name="number"
                  placeholder=" 11位手机号"
                  required="required"
                  style="width: 192px"
                />
              </td>
              <td><span style="color: red">必填</span></td>
            </tr>
            <tr>
              <td><b>创建密码 :&nbsp;</b></td>
              <td>
                <input
                  type="password"
                  name="psd"
                  placeholder=" 8位密码"
                  required="required"
                  style="width: 192px"
                />
              </td>
              <td><span style="color: red">必填</span></td>
            </tr>
            <tr>
              <td><b>注册邮箱 :&nbsp;</b></td>
              <td>
                <input
                  type="email"
                  name="email"
                  placeholder=" 例如:wustzz@sina.com"
                  required="required"
                  style="width: 192px"
                />
              </td>
              <td><span style="color: red">必填</span></td>
            </tr>
            <tr>
              <td style="text-align: right"><b>验证码 :&nbsp;</b></td>
              <td>
                <input type="text" name="code" id="code" style="width: 192px" />
              </td>
              <td style="color: blue">
                <b
                  ><i>
                    <span style="background-color: rgb(226, 158, 245)"
                      >&nbsp;&nbsp;<span
                        id="checkCode"
                        style="display: inline-block; width: 75px; text-align: center"
                      ></span
                      >&nbsp;
                    </span>
                  </i></b
                >
              </td>
              <td>
                <img
                  src="/images/arrow_03.png"
                  alt="刷新验证码"
                  width="24px"
                  height="25px"
                  style="position: relative; top: 2px; cursor: pointer"
                  onclick="newCheckCode()"
                />
              </td>
            </tr>
            <tr>
              <td style="text-align: right"><b>性别 :&nbsp;</b></td>
              <td>
                <label
                  ><input type="radio" name="sex" value="male" />男&nbsp;&nbsp;</label
                >
                <label><input type="radio" name="sex" value="female" />女</label>
              </td>
            </tr>
            <tr>
              <td style="text-align: right"><b>生日 :&nbsp;</b></td>
              <td><input type="date" name="myDate" style="width: 194px" /></td>
            </tr>
            <tr>
              <td style="text-align: right"><b>年龄 :&nbsp;</b></td>
              <td><input type="text" name="age" style="width: 192px" /></td>
            </tr>
            <tr>
              <td style="text-align: right"><b>籍贯 :&nbsp;</b></td>
              <td>
                <select name="province" style="width: 47%" required="required">
                  <option value="Hubei">湖北省</option>
                </select>
                <select name="city" style="width: 50%" required="required">
                  <option value="WuHan">武汉</option>
                  <option value="WuChang">武昌</option>
                </select>
              </td>
            </tr>
            <tr>
              <td><b>个人学历 :&nbsp;</b></td>
              <td>
                <select name="degree" style="width: 198px">
                  <option value="bachelor">本科</option>
                  <option value="master">研究生</option>
                  <option value="doctor">博士</option>
                </select>
              </td>
            </tr>
            <tr>
              <td style="text-align: right"><b>月薪 :&nbsp;</b></td>
              <td>
                <input
                  type="range"
                  name="salary"
                  id="salary"
                  min="0"
                  max="10000"
                  step="500"
                  value="5000"
                  style="width: 100px"
                />
                <span id="msg"></span>
              </td>
            </tr>
            <tr>
              <td><b>个人爱好 :&nbsp;</b></td>
              <td>
                <label><input type="checkbox" name="hobby" value="sing" />唱歌</label>
                <label><input type="checkbox" name="hobby" value="run" />跑步</label>
                <label><input type="checkbox" name="hobby" value="swim" />游泳</label>
              </td>
            </tr>
            <tr>
              <td><b>个人照片 :&nbsp;</b></td>
              <td>
                <input
                  type="file"
                  name="myPhoto"
                  id="myPhoto"
                  accept="image/*"
                  style="width: 200px"
                />
              </td>
            </tr>
            <tr>
              <td></td>
              <td>
                <div
                  id="image-preview"
                  style="
                    position: relative;
                    width: 198px;
                    height: 200px;
                    border: 1px solid grey;
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: 198px 200px;
                  "
                ></div>
              </td>
            </tr>
            <tr>
              <td><b>个人简介 :&nbsp;</b></td>
              <td colspan="2">
                <textarea name="info" rows="10" style="width: 66%"></textarea>
              </td>
            </tr>
            <tr>
              <td></td>
              <td>
                <input type="submit" value="提交" />
                &nbsp;&nbsp;
                <input type="reset" value="重填" />
              </td>
            </tr>
          </table>
        </fieldset>
      </form>
    </div>
    <script>
      var msg = document.getElementById("msg");
      window.onload = function () {
        msg.innerHTML = document.getElementById("salary").value;
        newCheckCode();
      };
      document.getElementById("salary").onmousemove = function () {
        msg.innerHTML = this.value;
      };
      var words = [
        "A",
        "a",
        "B",
        "b",
        "C",
        "c",
        "D",
        "d",
        "E",
        "e",
        "F",
        "f",
        "G",
        "g",
        "H",
        "h",
        "I",
        "i",
        "J",
        "j",
        "K",
        "k",
        "L",
        "l",
        "M",
        "m",
        "N",
        "n",
        "O",
        "o",
        "P",
        "p",
        "Q",
        "q",
        "R",
        "r",
        "S",
        "s",
        "T",
        "t",
        "U",
        "u",
        "V",
        "v",
        "W",
        "w",
        "X",
        "x",
        "Y",
        "y",
        "Z",
        "z",
      ];
      function newCheckCode() {
        let newCode = "";
        for (let i = 0; i < 4; ++i) {
          let index = Math.floor(Math.random() * 52);
          newCode += words[index];
          newCode += " ";
        }
        document.getElementById("checkCode").innerHTML = newCode;
      }
      function check() {
        let code = document.getElementById("code").value;
        let checkCode = document.getElementById("checkCode").innerHTML;
        checkCode = checkCode.split(" ").join(""); /* 去字符串的空格 */
        if (code == checkCode) return true;
        else {
          alert("验证码错误！");
          newCheckCode();
          code = "";
          return false;
        }
      }
      var fileInput = document.getElementById("myPhoto");
      var preview = document.getElementById("image-preview");
      fileInput.addEventListener("change", function () {
        preview.style.backgroundImage = "none";
        var file = fileInput.files[0];
        if (
          file.type !== "image/jpeg" &&
          file.type !== "image/png" &&
          file.type !== "image/gif"
        ) {
          alert("不是有效图片文件！");
          return;
        }
        var reader = new FileReader();
        reader.onload = function (e) {
          var date = e.target.result;
          preview.style.backgroundImage = "url(" + date + ")";
        };
        reader.readAsDataURL(file);
      });
    </script>
  </body>
</html>
